<template>
  <el-card class="box-card card-header m-t-20">
    <div slot="header" class="clearfix f-medium">
      <i class="el-icon-user-solid m-r-10 text-c-blue" aria-hidden="true"></i>
      <span>管理员列表</span>
    </div>
    <div class="">
      <div class="bg-blue p-15 m-t-10">
        <p>只有超级管理员可以添加管理员以及对其他管理员进行控制处理。</p>
      </div>
      <TableCreator class="planTable" :colsConfig="columnConfig" :data="userList" stripe :height="370">
        <template #state="{ row }">
          <div :class="row.state === '正常' ? 'text-c-green' : 'text-c-orange'
            ">
            <i class="fa fa-circle" aria-hidden="true"></i>
            <span> {{ row.state }}</span>
          </div>
        </template>
        <template #operation="{ row }">
          <div v-if="row.status === '管理员'">
            <el-button @click="toEdit(row)" :type="btnType(row.state)" size="mini" plain>{{
              btnText(row.state) }}</el-button>
            <el-button @click="toDelete(row)" type="danger" size="mini">删除</el-button>
          </div>
        </template>
      </TableCreator>
      <div>
        <i class="fa fa-folder-open-o m-r-10" aria-hidden="true"></i>共
        {{ userList.length }} 条数据
      </div>
    </div>
  </el-card>
</template>

<script>
import { columnConfig } from '../config/tableConfig'
import { MessageBox } from "element-ui";
import { mapState } from "vuex";
export default {
  name: "AdminsList",
  data() {
    return {
      columnConfig
    };
  },
  mounted() {
    this.$store.dispatch("userHandle/toGetAllUser");
  },
  methods: {
    // 修改状态
    toEdit(e) {
      let { id, state } = e;
      state = state === "正常" ? "stop" : "always";
      this.$store
        .dispatch("userHandle/toUpdateUserState", { id, state })
        .then(() => {
          this.$Notify('该管理员状态已修改');
        })
        .catch(() => {
          this.$Notify("请求异常，请稍后再试！", 'error');
        });
    },
    // 删除
    toDelete(e) {
      MessageBox.confirm("永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          await this.$store.dispatch("userHandle/toDeleteUser", e.id);
        })
        .then(() => {
          this.$Notify(`已删除管理员${e.username}`);
        })
        .catch((err) => {
          if (err === "cancel") return;
          this.$Notify("请求异常，请稍后再试！", 'error');
        });
    },
    btnType(state) {
      return state === '正常' ? 'warning' : 'info'
    },
    btnText(state) {
      return state === "正常" ? "停用" : "恢复"
    },
  },
  computed: {
    ...mapState("userHandle", ["userList"]),
  },
};
</script>
